<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子</title>
</head>
<style>
    #box {
        display: flex;
        flex-wrap: wrap;
        width: 480px;
        height: 300px;
        justify-content: space-evenly;
        align-content: space-evenly;
    }

    .div {
        display: flex;
        width: 100px;
        height: 100px;
        padding: 5px;
        background-color: #cccccc;
        border-radius: 15%;
    }

    .d1 {
        display: flex;
        width: 22px;
        height: 22px;
        border: 1px inset black;
        background-color: black;
        border-radius: 50%;
    }

    #parent1 {
        justify-content: center;
        align-items: center;
    }

    #parent2 {
        justify-content: space-between;
    }

    #son2B {
        align-self: flex-end;
    }

    #parent3 {
        justify-content: space-between;
    }

    #son3B {
        align-self: center;
    }

    #son3C {
        align-self: flex-end;
    }

    #parent4 {
        justify-content: space-between;
        flex-direction: column;
    }

    .son41 {
        display: flex;
        justify-content: space-between;
    }

    .son42 {
        display: flex;
        justify-content: space-between;
    }

    #parent5 {
        flex-direction: column;
        justify-content: space-between;
    }

    .son51 {
        display: flex;
        justify-content: space-between;
    }

    .son52 {
        display: flex;
        justify-content: space-between;
    }

    #son5A {
        align-self: center;
    }

    #parent6 {
        flex-direction: column;
        justify-content: space-between;
    }

    .son61 {
        display: flex;
        justify-content: space-between;

    }

    .son62 {
        display: flex;
        justify-content: space-between;
    }

    .son63 {
        display: flex;
        justify-content: space-between;
    }

    #parent7 {
        flex-direction: column;
        justify-content: space-between;
    }

    .son71 {
        display: flex;
        justify-content: space-between;
    }

    .son72 {
        display: flex;
        justify-content: space-between;
    }

    .son73 {
        display: flex;
        justify-content: space-between;
    }
</style>

<body>
    <div id="box">
        <div class="div" id="parent1">
            <div class="d1"></div>
        </div>
        <div class="div" id="parent2">
            <div class="d1"></div>
            <div class="d1" id="son2B"></div>
        </div>
        <div class="div" id="parent3">
            <div class="d1"></div>
            <div class="d1" id="son3B"></div>
            <div class="d1" id="son3C"></div>
        </div>
        <div class="div" id="parent4">
            <div class="son41">
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
            <div class="son42">
                <div class="d1"></div>
                <div class="d1"></div>
            </div>

        </div>
        <div class="div" id="parent5">
            <div class="son51">
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
            <div class="d1" id="son5A"></div>
            <div class="son52">
                <div class="d1"></div>
                <div class="d1"></div>
            </div>

        </div>
        <div class="div" id="parent6">
            <div class="son61">
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
            <div class="son62">
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
            <div class="son63">
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
        </div>
        <div class="div" id="parent7">
            <div class="son71">
                <div class="d1"></div>
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
            <div class="son72">
                <div class="d1"></div>
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
            <div class="son73">
                <div class="d1"></div>
                <div class="d1"></div>
                <div class="d1"></div>
            </div>
        </div>
    </div>
</body>

</html>